﻿@model DashboardModel
@inject Grand.Services.Security.IPermissionService permissionService
@inject Grand.Core.Domain.Customers.CustomerSettings customerSettings
@inject Grand.Services.Customers.ICustomerService customerService
@inject Grand.Services.Orders.IOrderReportService orderReportService
@inject Grand.Services.Catalog.IPriceFormatter priceFormatter
@inject Grand.Core.IWorkContext workContext
@{
    //page title
    ViewBag.Title = T("Admin.Dashboard").Text;
    var canAccessReports = await permissionService.Authorize(Grand.Services.Security.StandardPermissionProvider.ManageReports);
    var canManageOrders = await permissionService.Authorize(Grand.Services.Security.StandardPermissionProvider.ManageOrders);
    var customersOnline = (await customerService.GetOnlineCustomers(DateTime.UtcNow.AddMinutes(-customerSettings.OnlineCustomerMinutes), null, 1, 1, workContext.CurrentCustomer.StaffStoreId)).TotalCount;
    var customersShoppingCart = await customerService.GetCountOnlineShoppingCart(DateTime.UtcNow.AddMinutes(-customerSettings.OnlineShoppingCartMinutes), workContext.CurrentCustomer.StaffStoreId);
    var ordersToday = await orderReportService.GetOrderPeriodReport(0, workContext.CurrentCustomer.StaffStoreId);
    var ordersAmount = priceFormatter.FormatPrice(ordersToday.Amount, true, false);
}

<vc:admin-widget widget-zone="admin_dashboard_top" additional-data="null" />
@if (!Model.IsLoggedInAsVendor && canManageOrders)
{
    <div class="row top_tiles">
        <div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="tile-stats">
                <div class="icon"><i class="fa fa-user"></i></div>
                <div class="count">@customersOnline</div>
                <h3> @T("Admin.Dashboard.OnlineCustomers")</h3>
                <p>@T("Admin.Dashboard.OnlineCustomerMinutes", customerSettings.OnlineCustomerMinutes)</p>
            </div>
        </div>
        <div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="tile-stats">
                <div class="icon"><i class="fa fa-shopping-cart"></i></div>
                <div class="count">@customersShoppingCart</div>
                <h3> @T("Admin.Dashboard.ActiveShoppingCarts")</h3>
                <p>@T("Admin.Dashboard.OnlineShoppingCart", customerSettings.OnlineShoppingCartMinutes)</p>
            </div>
        </div>
        <div class="animated flipInY col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="tile-stats">
                <div class="icon"><i class="fa fa-money"></i></div>
                <div class="count"> @ordersAmount / @ordersToday.Count</div>
                <h3>  @T("Admin.Dashboard.TodayOrders")</h3>
                <p> @T("Admin.Dashboard.TodayOrders.AmountCount")</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>@T("Admin.Dashboard.Summary")</h2>
                    <div class="filter">
                        <div class="page-bar" style="height:43px;">
                            <div class="page-toolbar">
                                <div id="dashboard-report-range" class="pull-right btn btn-fit-height green" data-original-title="Change dashboard date range">
                                    <i class="icon-calendar"></i>&nbsp;
                                    <span class="thin uppercase hidden-xs"></span>&nbsp;
                                    <i class="fa fa-angle-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @if (canAccessReports)
                    {
                        <div class="col-xs-12 col-sm-12 col-lg-8 col-md-12 whiteBg">
                            @await Component.InvokeAsync("CustomerReportCustomerTimeChart")
                        </div>
                    }
                    <div class="col-cs-12 col-sm-12 col-lg-4 col-md-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>
                                    @T("Admin.Dashboard.ActivityOverview")
                                </h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content-body">
                                <div class="partialContents" data-url="@Url.Action("DashboardActivity")">
                                    <img src="~/administration/build/images/loading.gif" /> Loading ...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            @if (!Model.HideReportGA)
            {
                <div class="col-xs-12 col-sm-12 col-lg-4 col-md-12 whiteBg">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="caption level-caption">
                                <i class="fa fa-line-chart font-blue"></i>
                                <span class="caption-subject font-blue bold uppercase">@T("Admin.Dashboard.GoogleAnalytics")</span>
                            </div>
                        </div>
                        <div class="x_content">
                            <div class="partialContents Dashboard_GoogleAnalytics_Data" data-url="@Url.Action("DashboardGeneralData", "GoogleAnalytics")">
                                <img src="~/administration/build/images/loading.gif" /> Loading ...
                            </div>
                        </div>
                    </div>
                </div>
                @if (canAccessReports)
                {
                    <div class="col-sm-12 col-lg-8 col-md-12 whiteBg sssss">
                        @await Component.InvokeAsync("OrderReportOrderTimeChart")
                    </div>
                }
            }
            else
            {
                @if (canAccessReports)
                {
                    <div class="col-sm-12 col-lg-12 col-md-12 whiteBg">
                        @await Component.InvokeAsync("OrderReportOrderTimeChart")
                    </div>
                }
            }
        </div>
    </div>
    if (!Model.HideReportGA)
    {
        <div class="row">
            <div class="col-md-12">
                <div class="col-sm-12 col-lg-6 col-md-12 whiteBg">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="caption level-caption">
                                <i class="fa fa-sign-in font-blue"></i>
                                <span class="caption-subject font-blue bold uppercase">@T("Admin.Dashboard.GoogleAnalytics.Source")</span>
                            </div>
                        </div>
                        <div class="x_content">
                            <div class="partialContents Dashboard_GoogleAnalytics_Data" data-url="@Url.Action("DashboardDataBySource", "GoogleAnalytics")">
                                <img src="~/administration/build/images/loading.gif" /> Loading ...
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-6 col-md-12 whiteBg">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="caption level-caption">
                                <i class="fa fa-sign-out font-blue"></i>
                                <span class="caption-subject font-blue bold uppercase">@T("Admin.Dashboard.GoogleAnalytics.Exit")</span>
                            </div>
                        </div>
                        <div class="x_content">
                            <div class="partialContents Dashboard_GoogleAnalytics_Data" data-url="@Url.Action("DashboardDataByExit", "GoogleAnalytics")">
                                <img src="~/administration/build/images/loading.gif" /> Loading ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="col-sm-12 col-lg-6 col-md-12 whiteBg">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="caption level-caption">
                                <i class="fa fa-laptop font-blue"></i>
                                <span class="caption-subject font-blue bold uppercase">@T("Admin.Dashboard.GoogleAnalytics.Device")</span>
                            </div>
                        </div>
                        <div class="x_content">
                            <div class="partialContents Dashboard_GoogleAnalytics_Data" data-url="@Url.Action("DashboardDataByDevice", "GoogleAnalytics")">
                                <img src="~/administration/build/images/loading.gif" /> Loading ...
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-lg-6 col-md-12 whiteBg">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="caption level-caption">
                                <i class="fa fa-map-marker font-blue"></i>
                                <span class="caption-subject font-blue bold uppercase">@T("Admin.Dashboard.GoogleAnalytics.Localization")</span>
                            </div>
                        </div>
                        <div class="x_content">
                            <div class="partialContents Dashboard_GoogleAnalytics_Data" data-url="@Url.Action("DashboardDataByLocalization", "GoogleAnalytics")">
                                <img src="~/administration/build/images/loading.gif" /> Loading ...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}
@if (Model.IsLoggedInAsVendor)
{
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>@T("Admin.Dashboard.Summary")</h2>
                    <div class="filter">
                        <div class="page-bar" style="height:43px;">
                            <div class="page-toolbar">
                                <div id="dashboard-report-range" class="pull-right btn btn-fit-height green" data-original-title="Change dashboard date range">
                                    <i class="icon-calendar"></i>&nbsp;
                                    <span class="thin uppercase hidden-xs"></span>&nbsp;
                                    <i class="fa fa-angle-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
}
@if (canManageOrders)
{
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel light bordered">
                <div class="x_title">
                    <h2 class="caption-subject font-blue bold uppercase">@T("Admin.Dashboard.ReportLatestOrder")</h2>
                    <div class="clear"></div>
                </div>
                <div class="x_content">
                    @await Component.InvokeAsync("OrderReportLatestOrder")
                </div>
            </div>
        </div>
    </div>
}
<vc:admin-widget widget-zone="admin_dashboard_bottom" additional-data="null" />
<script type="text/javascript">
    $(document).ready(function (e) {
        var site = site || {};
        site.baseUrl = site.baseUrl || "";
        $(".partialContents").each(function (index, item) {
            var url = site.baseUrl + $(item).data("url");
            if (url && url.length > 0) {
                $(item).load(url);
            }
        });
    });


    var Dashboard = function () {
        return {
            initDashboardDaterange: function () {
                if (!jQuery().daterangepicker) {
                    return;
                }

                $('#dashboard-report-range').daterangepicker({
                    startDate: moment().startOf('month'),
                    "ranges": {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    "locale": {
                        "format": "MM/DD/YYYY",
                        "separator": " - ",
                        "applyLabel": "Apply",
                        "cancelLabel": "Cancel",
                        "fromLabel": "From",
                        "toLabel": "To",
                        "customRangeLabel": "Custom",
                        "daysOfWeek": [
                            "Su",
                            "Mo",
                            "Tu",
                            "We",
                            "Th",
                            "Fr",
                            "Sa"
                        ],
                        "monthNames": [
                            "January",
                            "February",
                            "March",
                            "April",
                            "May",
                            "June",
                            "July",
                            "August",
                            "September",
                            "October",
                            "November",
                            "December"
                        ],
                        "firstDay": 1
                    },
                    opens: ($('html').css('direction') === 'rtl' ? 'right' : 'left'),
                }, function (start, end, label) {
                    $('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                });

                $('#dashboard-report-range span').html(moment().startOf('month').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
                $('#dashboard-report-range').show();
            },

            init: function () {
                this.initDashboardDaterange();
            }
        }
    }();

    Dashboard.init();

    $('#dashboard-report-range').on('apply.daterangepicker', function (ev, picker) {
        if ($.isFunction(window.initReportCustomerTimeChart)) {
            initReportCustomerTimeChart(false);
        };
        if ($.isFunction(window.initReportOrderTimeChart)) {
            initReportOrderTimeChart(false);
        };
        var gridOrders = $('#latest-orders-grid').data('kendoGrid');
        if (gridOrders != undefined) {
            gridOrders.dataSource.read();
        }

        $(".Dashboard_GoogleAnalytics_Data").each(function (index, item) {
            $(item).html('<img src="administration/images/loading.gif" /> Loading ...');
            var url = $(item).data("url") + '?startDate=' + $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD') + '&endDate=' + $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD');
            if (url && url.length > 0) {
                $(item).load(url);
            }
        });
    });</script>
